<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>紫色鹭</title>
    <meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, shrink-to-fit=no'
          name='viewport'/>
    <link rel="stylesheet" href="assets/css/bootstrap.min.css">
    <link rel="stylesheet"
          href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i">
    <link rel="stylesheet" href="assets/css/ready.css">
    <link rel="stylesheet" href="assets/css/demo.css">
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/style-zj.css">
</head>
<body>
<div class="wrapper" id="app">
    <div class="main-header">
        <div class="logo-header">
            <a href="index.html" class="logo">
                紫色鹭后台管理
            </a>
            <button class="navbar-toggler sidenav-toggler ml-auto" type="button" data-toggle="collapse"
                    data-target="collapse" aria-controls="sidebar" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <button class="topbar-toggler more"><i class="la la-ellipsis-v"></i></button>
        </div>
        <nav class="navbar navbar-header navbar-expand-lg">
            <div class="container-fluid">
                <ul class="navbar-nav topbar-nav ml-md-auto align-items-center">
                    <li class="nav-item dropdown">
                        <a class="dropdown-toggle profile-pic" data-toggle="dropdown" href="#" aria-expanded="false">
                            <img src="assets/img/profile.jpg" alt="user-img" width="36"
                                 class="img-circle"><span id="username"></span></span> </a>
                        <ul class="dropdown-menu dropdown-user">
                            <li>
                                <a class="dropdown-item loginOut" href="#"><i class="fa fa-power-off"></i>退出登录</a>
                        </ul>
                        <!-- /.dropdown-user -->
                    </li>
                </ul>
            </div>
        </nav>
    </div>
    <div class="sidebar">
        <div class="scrollbar-inner sidebar-wrapper">
            <ul class="nav">
                <li class="nav-item active">
                    <a href="index.html">
                        <i class="la la-dashboard"></i>
                        <p>首页轮播管理</p>
                    </a>
                </li>
                <li class="nav-item">
                    <a href="user-admin.html">
                        <i class="la la-table"></i>
                        <p>用户管理</p>
                    </a>
                </li>
                <li class="nav-item">
                    <a href="class.html">
                        <i class="la la-keyboard-o"></i>
                        <p>商品分类管理</p>
                    </a>
                </li>
                <li class="nav-item">
                    <a href="admin_brand.html">
                        <i class="la la-th"></i>
                        <p>入驻品牌管理</p>
                    </a>
                </li>
                <li class="nav-item">
                    <a href="store-pass.html">
                        <i class="la la-bell"></i>
                        <p>店铺审核管理</p>
                    </a>
                </li>
                <li class="nav-item">
                    <a href="brand-pass.html">
                        <i class="la la-bell"></i>
                        <p>品牌审核管理</p>
                    </a>
                </li>
                <!--<li class="nav-item">-->
                    <!--<a href="typography.html">-->
                        <!--<i class="la la-font"></i>-->
                        <!--<p>Typography</p>-->
                    <!--</a>-->
                <!--</li>-->
                <!--<li class="nav-item">-->
                    <!--<a href="icons.html">-->
                        <!--<i class="la la-fonticons"></i>-->
                        <!--<p>Icons</p>-->
                    <!--</a>-->
                <!--</li>-->
            </ul>

        </div>
    </div>
    <div class="main-panel">
        <div class="content">
            <div class="container-fluid">
                <!--<h4 class="page-title">首页轮播管理</h4>-->
                <div class="card">
                    <div class="card-header">
                        <div class="card-title">首页轮播管理 <button class="btn btn-primary" @click="toAdd" data-toggle="modal" data-target="#modalUpdate">新增轮播</button></div>
                    </div>
                    <div class="card-body">
                        <table class="table table-bordered">
                            <thead>
                            <tr>
                                <th scope="col">图片</th>
                                <th scope="col">跳转链接</th>
                                <th scope="col">内容</th>
                                <th scope="col">操作</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr v-for="(item,index) in list">
                                <td><img class="banner_img" :src="imgBaseUrl + item.picUrl" alt=""></td>
                                <td>{{item.link}}</td>
                                <td><div v-html="item.content"></div></td>
                                <td>
                                    <button class="btn btn-success block"  @click="toEdit(item.id,index)" data-toggle="modal" data-target="#modalUpdate">编辑</button>
                                    <button class="btn btn-danger block" @click="toDelete(item.id)">删除</button>
                                </td>
                            </tr>
                            </tbody>
                        </table>
                        <div id="page1"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade" id="modalUpdate" tabindex="-1" role="dialog" aria-labelledby="modalUpdatePro" style="display: none;" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-header bg-primary">
                    <h6 class="modal-title">{{title}}</h6>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">×</span>
                    </button>
                </div>
                <div class="modal-body text-center">
                    <table class="table table-head-bg-success">
                        <tr>
                            <td>图片</td>
                            <td>
                                <div class="layui-upload">
                                    <button type="button" class="layui-btn" id="test1" :picUrl="info.picUrl">+</button>
                                    <div class="layui-upload-list">
                                        <img class="layui-upload-img" id="demo1" :src="info?imgBaseUrl + info.picUrl:'img/fff-back.jpg'">
                                        <p id="demoText"></p>
                                    </div>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td>跳转链接</td>
                            <td>
                                <input type="text" class="form-control input-square" id="link" :value="info?info.link:''">
                            </td>
                        </tr>
                        <tr>
                            <td>内容</td>
                            <td><textarea id="demo" style="display: none;" :value="info.content"></textarea></td>
                        </tr>
                    </table>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary sure" data-dismiss="modal">确定</button>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- Modal -->
</body>
<script src="assets/js/core/jquery.3.2.1.min.js"></script>
<script src="assets/js/plugin/jquery-ui-1.12.1.custom/jquery-ui.min.js"></script>
<script src="assets/js/core/popper.min.js"></script>
<script src="assets/js/core/bootstrap.min.js"></script>
<script src="assets/js/plugin/bootstrap-notify/bootstrap-notify.min.js"></script>
<script src="assets/js/plugin/bootstrap-toggle/bootstrap-toggle.min.js"></script>
<script src="assets/js/plugin/jquery-mapael/jquery.mapael.min.js"></script>
<script src="assets/js/plugin/jquery-mapael/maps/world_countries.min.js"></script>
<script src="assets/js/plugin/chart-circle/circles.min.js"></script>
<script src="assets/js/plugin/jquery-scrollbar/jquery.scrollbar.min.js"></script>
<script src="js/config.js"></script>
<script>
    var Token = localStorage.getItem("Token");
    var limit = 10;
    var offset = 1;
    var count;
    var layedit;
    var edit;
    var app = new Vue({
        el: '#app',
        data: {
            list:[],
            imgBaseUrl:imgBaseUrl,
            info:"",
            title:"新增",
            id:""
        },
        beforeCreate: function () {
            var that = this;
        },
        methods:{
            toEdit:function (id,index) {
                console.log(id);
                this.title = "编辑";
                this.id = id;
                this.info = this.list[index];
                $(".add_model").show();
                $(".main").hide();
            },
            toDelete:function (id) {
                get_confirm("确认删除改轮播吗？",function () {
                    get_ajax("/sys/banner/del",{id:id},function (data) {
                        location.reload();
                    })
                })
            },
            toAdd:function () {
                this.title = "新增";
                this.info = "";
            }
        },
        updated:function () {
            layui.use('layedit', function() {
                layedit = layui.layedit;
                layedit.set({
                    uploadImage: {
                        url: baseUrl+'/file/layeditUplode?token='+Token,
                        type:"post"
                    }
                });
                edit = layedit.build('demo');
            })
        }

    });

    //图片上传
    layui.use(['upload'], function() {
        var $ = layui.jquery, upload = layui.upload;
        //普通图片上传
        var uploadInst = upload.render({
            elem: '#test1'
            , url: baseUrl+'/file/upload?token='+Token
            , before: function (obj) {
                //预读本地文件示例，不支持ie8
                obj.preview(function (index, file, result) {
                    $('#demo1').attr('src', result); //图片链接（base64）
                });
            }
            , done: function (res,index) {
                //如果上传失败
                if (res.code > 0) {
                    return layer.msg('上传失败');
                }else{
                    var item = this.item;
                    var data = res.data;
                    this.item.attr("picUrl",data.address);
                    this.item.attr("picId",data.id);
                }

            }
            , error: function () {

            }
        });
    })
    $(".sure").click(function () {
        var picUrl = $("#test1").attr("picUrl");
        var link = $("#link").val();
        var content = layedit.getContent(edit);
        if(!picUrl){
            alert("请上传图片！")
        }
        if(app.title == "新增"){
            get_ajax("/sys/banner/add",{picUrl:picUrl,link:link,content:content,type:1},function (data) {
                location.reload();
            })
        }else{
            get_ajax("/sys/banner/edit",{picUrl:picUrl,link:link,content:content,type:1,id:app.id},function (data) {
                location.reload();
            })
        }

    });

    function initPage() {
        get_ajax("/sys/banner/getBannerPage",{limit:limit,offset:offset},function (data) {
            app.list = data;
        })
    }

    get_ajaxPage("/sys/banner/getBannerPage", {
        limit: limit,
        offset: offset,
    }, function (data) {
        app.list = data.data;
        count = data.count;
        layui.use(['layer','laypage'], function () {
            var laypage = layui.laypage;
            laypage.render({
                elem: 'page1',
                count: count,
                limit: limit,
                jump:function (obj, first) {
                    //当前页数
                    offset = obj.curr;
                    if(!first){
                        initPage();
                    }
                }
            });
        })
    })

</script>
</html>